<template>
	<div>
		<NavigationBar title-text="服务" :is-show-button="false" />
		<Message ref="message" />
		<Loading ref="loading" fullscreen />
		<div class="cover-container w-full h-280rpx absolute top-0 left-0" :style="{ height: `calc(${navigationHeight}px + 340rpx)` }">
			<image class="w-full h-full" src="/static/images/my-bg.jpg" mode="aspectFill" />
		</div>
		<div class="serve-container w-full h-screen flex-column pt-200rpx">
			<div class="w-full mb-20rpx pl-10rpx pr-10rpx">
				<u-search shape="round" v-model="searchKey" @custom="searchServe" bg-color="#fff"></u-search>
			</div>
			<div>
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" bg-color=""></u-tabs-swiper>
			</div>
			<div class="p-30rpx">
				<div class="order-item w-full mb-20rpx p-30rpx flex-column bg-white rounded-xl" v-for="item in serveList" :key="item.id" @click="gotoDetail(item.id)">
					<div class="w-full flex items-center justify-between">
						<div class="w-100rpx h-100rpx">
							<image class="w-full h-full" :src="item.img" mode="aspectFill" />
						</div>
						<div class="flex-grow-1 text-center font-bold">{{ item.servicename }}</div>
					</div>
					<div class="w-full flex items-center justify-between mt-10rpx">
						<div>科室：{{ item.name }}</div>
						<div>{{ role === 'doctor' ? '医生' : '护士' }}:{{ item.userName }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import Message from '@/components/message/src/message.vue';
import type { MessageMethod } from '@/components/message';
import Loading from '@/components/loading/src/loading.vue';
import type { LoadingMethod } from '@/components/loading';
import NavigationBar from '@/components/navigation-bar/src/navigation-bar.vue';
import { gotoPage } from '@/common/utils';
import { useUserStore, useSystemStore } from '@/store';
import { serveApi } from '@/service/api';

const userStore = useUserStore();

const message = ref<InstanceType<typeof Message> & MessageMethod>(null);
const loading = ref<InstanceType<typeof Loading> & LoadingMethod>(null);

const agreeCheckbox = ref<boolean>(false); //用户已阅读并同意使用协议
const loginSucceeded = ref<boolean>(false); //是否已经登录
const toUrl = ref<string>(''); //登陆成功后要跳转的页面
const { navigationHeight } = useSystemStore();
const list = ref([
	{
		name: '医生',
		value: 'doctor',
	},
	{
		name: '护士',
		value: 'nurse',
	},
]);
const serveList = ref([]);
const current = ref(0);
const role = ref('doctor');
const searchKey = ref('');
const tabsChange = (index: number) => {
	current.value = index;
	role.value = current.value === 0 ? 'doctor' : 'nurse';
	getServeList(role.value);
};

// 获取服务列表
const getServeList = useThrottleFn(
	async (role, searchKey = ''): Promise<void> => {
		const res = await serveApi.getServiceInfo({ role, searchKey });
		console.log(res.data?.data.result);
		serveList.value = res.data?.data.result;
	},
	2000,
	false,
	true
);

getServeList(role.value);

// 搜索
const searchServe = () => {
	console.log(searchKey.value);

	if (searchKey.value) {
		getServeList(role.value, searchKey.value);
	}
};

const gotoDetail = useThrottleFn(
	(id: string): void => {
		gotoPage(`/pages/serveDetail/serveDetail?id=${id}&role=${role.value}`);
	},
	1000,
	false,
	true
);
// 返回上一页
const handleNavigateBack = (): void => {
	uni.navigateBack({
		delta: 2,
	});
};

onShow(() => {
	const instance = getCurrentInstance();
	nextTick(() => {
		//@ts-ignore
		toUrl.value = instance?.proxy?.$passedParams?.url ?? '';
	});
});
</script>

<style scoped lang="scss">
@import 'serve';
</style>
